<template>
  <view class="page">
    <image
      :src="parkDetail.tps[0].url"
      class="bg"
      @click="previewBigImg(parkDetail.tps[0].url, parkDetail.tps)" />
    <view class="content">
      <view class="item">
        <view class="left-name">停车点：</view>
        <view class="right-info"> {{ parkDetail.title }}</view>
      </view>
      <view class="tag-box">
        <view v-for="tag in tagList" :key="tag" class="tag-item">
          {{ tag }}
        </view>
      </view>
      <view class="item">
        <view class="left-name">距离：</view>
        <view class="right-info">
          {{
            '距您' + parkDetail.distanceInKm + '公里 | ' + parkDetail.address
          }}
        </view>
      </view>
      <view class="item">
        <view class="left-name">地点：</view>
        <view class="right-info">
          {{ parkDetail.address }}
        </view>
      </view>
      <view class="item">
        <view class="left-name" style="width: 100px">详细描述：</view>
        <view class="right-info"> {{ parkDetail.descs }}</view>
      </view>
    </view>
    <view class="fiexd-bottom">
      <view class="nav-button">
        <view @click="previewMap()" class="left-btn"> 导航 </view>|
        <view @click="collectInfo()" class="right-btn">
          {{ isCollect == 0 ? '收藏' : '已收藏' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { fetchCollect } from '@/api/weixin.js';
var QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
  key: 'BUJBZ-VYVCL-HS7PK-MEU3Y-NXWGK-MLBDB',
});
export default {
  data() {
    return {
      location: {
        longitude: 0,
        latitude: 0,
      },
      isCollect: 0,
      parkDetail: {},
      tagList: [],
    };
  },
  methods: {
    previewMap() {
      const locationData = this.parkDetail.zb.split(',');
      uni.openLocation({
        longitude: Number(locationData[0]),
        latitude: Number(locationData[1]),
      });
    },
    async collectInfo() {
      this.isCollect = this.isCollect == 0 ? 1 : 0;
      const params = {
        parkingId: this.parkDetail.id,
        isCollect: this.isCollect,
      };
      console.log('params: ', params);
      const response = await fetchCollect(params);
      if (response.code == 0) {
        uni.showToast({
          title: this.isCollect == 1 ? '收藏成功' : '已取消收藏',
        });
      }
      console.log('response: ', response);
    },
    previewBigImg(src, list) {
      console.log('src: ', src);
      console.log('list: ', list);
      wx.previewImage({
        current: src,
        urls: [src],
      });
    },
    initTagList() {
      const list = this.parkDetail?.sfmsText
        .split(',')
        .concat(this.parkDetail.tclxText.split(','));
      if (this.parkDetail.sfcd) {
        list.push('充电桩');
      }
      this.tagList = list;
    },
  },
  onLoad: function () {
    this.parkDetail = uni.getStorageSync('parkInfoDetail');
    this.initTagList();
    qqmapsdk.search({
      keyword: '酒店',
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      },
    });
    // this.parkDetail.currentZb = '113.908847,22.577153';
    // this.location = uni.getStorageSync('location');
    // this.placeInfo = data.find((item) => item.id === Number(option.id));
  },
};
</script>

<style lang="scss">
.page {
  .bg {
    width: 100%;
    height: 250px;
  }

  .content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 20rpx;

    .item {
      margin-top: 15px;
      display: flex;

      > .left-name {
        font-size: 15px;
        font-weight: 600;
        color: #000;
      }

      > .right-info {
        font-size: 14px;
        font-size: 400;
        color: #999;
      }
    }

    .tag-box {
      display: flex;
      margin: 20rpx 0;

      .tag-item {
        padding: 4rpx 16rpx;
        border-radius: 8rpx;
        color: white;
        font-size: 12px;
        background: #18bc37;
        margin-right: 8rpx;
      }
    }
  }

  .fiexd-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 120rpx;
    background: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .nav-button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2979ff;
      color: white;
      width: 300px;
      text-align: center;
      padding: 14rpx;
      border-radius: 99rpx;

      .left-btn {
        width: 145px;
        text-align: center;
      }

      .right-btn {
        text-align: center;
        width: 145px;
      }
    }
  }
}
</style>
